<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>当当图书榜</title>
		<style>
			/*以下为通用样式*/
			
			body,
			div,
			img,
			a,
			p,
			span {
				margin: 0;
				padding: 0;
			}
			
			* {
				font-family: verdana "宋体";
				font-size: 12px;
			}
			
			a {
				display: inline-block;
				text-decoration: none;
			}
			
			.clearfix:after {
				display: table;
				content: "";
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.box {
				width: 960px;
				margin: 0 auto;
			}
			/*以下为header部分*/
			
			.header {
				margin-top: 10px;
			}
			
			.text1 {
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #eafffa;
				font-size: 14px;
				margin-top: 18px;
				border: 1px solid #c8ece3;
				border-bottom: none;
				position: relative;
			}
			
			.text1 a {
				color: #7b7b7b;
				margin: 0 8px;
			}
			
			.text1 a:hover {
				color: #fe6915;
			}
			
			.img1 {
				position: absolute;
				top: -16px;
				left: 8px;
			}
			
			.nav {
				background: url(img/menuBg.jpg);
				margin-top: 8px;
				padding-left: 10px;
			}
			
			.nav div {
				display: inline-block;
				width: 50px;
				height: 36px;
				line-height: 36px;
				text-align: center;
			}
			
			.link a {
				color: white;
				font-size: 14px;
			}
			
			.link:hover a {
				text-decoration: underline;
			}
			/*以下为body部分*/
			
			.img2 {
				margin: 10px 0;
			}
			
			.content {
				border: 2px solid #cce9ac;
			}
			
			.img3 {
				position: relative;
				left: -10px;
				top: 10px;
			}
			
			.book1 {
				margin: 50px 10px 10px;
			}
			
			.img4 {
				position: relative;
			}
			
			.icon1 {
				position: absolute;
				top: -4px;
				left: 20px;
			}
			
			.text2 {
				width: 280px;
				height: 260px;
				padding-top: 10px;
			}
			
			.text2 a {
				font-size: 14px;
				color: #1a66b3;
				margin-bottom: 6px;
			}
			
			.text2 p {
				font-size: 14px;
				margin-bottom: 4px;
				line-height: 20px;
			}
			
			.price {
				color: #8e112b;
				font-weight: bold;
				margin-right: 10px;
			}
			
			.book2 {
				margin: 60px 0 5px 10px;
			}
			
			.book3 {
				margin: 5px 0 20px 10px;
			}
			
			.img5 {
				position: relative;
			}
			
			.icon2 {
				position: absolute;
				top: -6px;
				left: 0px;
			}
			
			.text3 p:nth-of-type(3) {
				color: #5ea593;
			}
			
			.text3 {
				width: 270px;
			}
			
			.text3 a {
				font-size: 14px;
				color: #1a66b3;
				margin-bottom: 6px;
			}
			
			.text3 p {
				font-size: 14px;
				margin-bottom: 4px;
				line-height: 20px;
			}
			/*以下为footer部分*/
			
			.footer {
				margin: 0px auto;
				text-align: center;
				height: 48px;
				line-height: 48px;
			}
			
			.footer div {
				color: #848484;
				font-size: 14px;
				margin: 8px 0 20px;
			}
			
			.footer div img {
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<!--以下为header部分-->
			<div class="header">
				<div class="top clearfix">
					<div class="logo fl">
						<a href="#"><img src="img/logo.jpg" /></a>
					</div>
					<div class="text1 fr">
						<a href="#">尾品汇</a>
						<a href="#">当当优品</a>
						<a href="#">数字馆</a>
						<a href="#">都看阅器</a>
						<div class="img1"><img src="img/icon_count.png" /></div>
					</div>
				</div>
				<div class="nav">
					<div class="link">
						<a href="#">首页</a>
					</div>
					<div class="link">
						<a href="#">图书</a>
					</div>
					<div class="link">
						<a href="#">音像</a>
					</div>
					<div class="link">
						<a href="#">童装</a>
					</div>
					<div class="link">
						<a href="#">服装</a>
					</div>
					<div class="link">
						<a href="#">鞋靴</a>
					</div>
					<div class="link">
						<a href="#">运动</a>
					</div>
					<div class="link">
						<a href="#">箱包</a>
					</div>
					<div class="link">
						<a href="#">美妆</a>
					</div>
					<div class="link">
						<a href="#">珠宝</a>
					</div>
					<div class="link">
						<a href="#">家居</a>
					</div>
					<div class="link">
						<a href="#">食品</a>
					</div>
					<div class="link">
						<a href="#">酒</a>
					</div>
					<div class="link">
						<a href="#">手机</a>
					</div>
					<div class="link">
						<a href="#">数码</a>
					</div>
					<div class="link">
						<a href="#">电脑</a>
					</div>
					<div class="link">
						<a href="#">家电</a>
					</div>
				</div>
			</div>
			<!--以下为body部分-->
			<div class="body">
				<div class="img2">
					<img src="img/banner.png" />
				</div>
				<div class="content">
					<div class="img3"><img src="img/bg_bang.gif" /></div>
					<div class="book clearfix">
						<div class="fl">
							<div class="book1 clearfix">
								<div class="img4 fl">
									<img src="img/book-01.jpg" />
									<div class="icon1">
										<img src="img/bookNo1.gif" />
									</div>
								</div>
								<div class="text2 fl">
									<a href="#">偷影子的人</a>
									<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
									<p>出版社：湖南文艺出版社</p>
									<p>当当价：<span class="price">￥ 17.90</span></p>
									<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
								</div>
							</div>
						</div>
						<div class="fl">
							<div class="book2 clearfix">
								<div class="img5 fl">
									<img src="img/book-02.jpg" />
									<div class="icon2">
										<img src="img/bookNo2.gif" />
									</div>
								</div>
								<div class="text3 fl">
									<a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a>
									<p>作 者：柴静 著</p>
									<p>出版社：广西师范大学出版社</p>
									<p><span class="price">￥ 29.40</span>7.4折</p>
								</div>
							</div>
						</div>
						<div class="fl">
							<div class="book3 clearfix">
								<div class="img5 fl">
									<img src="img/book-03.jpg" />
									<div class="icon2">
										<img src="img/bookNo3.gif" />
									</div>
								</div>
								<div class="text3 fl">
									<a href="#">改变孩子先改变自己</a>
									<p>作 者：贾容韬 贾毅 著</p>
									<p>出版社：作家出版社</p>
									<p><span class="price">￥ 22.20</span>7.4折</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--以下为footer部分-->
			<div class="footer">
				<div>
					Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="img/validate.gif" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号
				</div>
			</div>
		</div>
	</body>

</html>